<script setup lang="ts">
    import { onMounted, reactive, ref } from 'vue'
    import BpmnViewer from "bpmn-js/lib/Viewer.js"

    const bpmnViewer = ref();
    const viewerCanvas = ref();
    const props = defineProps({
        xmlStr: {
            type: String,
            default: null
        }
    })

    onMounted(()=>{
        onViewerInit()
    })

    function onViewerInit() {
        // 初始时清除图层
        if(bpmnViewer && bpmnViewer.value){
            bpmnViewer && bpmnViewer.value.destroy();
            viewerCanvas.value.innerHTML = "";
        }

        // 初始化
        bpmnViewer.value = new BpmnViewer({
            container: viewerCanvas.value,
            height: 520,
        })

        let xmlStr:string = props.xmlStr;
        bpmnViewer.value.importXML(xmlStr).then(() => {
            console.log("success");
            bpmnViewer.value.get("canvas").zoom("fit-viewport");
        }).catch((error:any) => {
            console.log(error);
        });
    }

</script>
<template>
    <div class="bpmn-viewer-container">
        <div id="container" ref="viewerCanvas"></div>
    </div>
</template>
<style lang="scss">
    .bpmn-viewer-container{
        background: url('') repeat !important;
        width:100%;
        height:100%;
        .bjs-powered-by {
            display: none;
        }
    }
</style>